<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="resources/scripts/jquery-1.7.1.min.js"></script>
    <script src="resources/scripts/jquery-ui-1.8.10.custom.min.js"></script>
    <script src="resources/scripts/axure/axQuery.js"></script>
    <script src="resources/scripts/axure/globals.js"></script>
    <script src="resources/scripts/axutils.js"></script>
    <script src="resources/scripts/axure/annotation.js"></script>
    <script src="resources/scripts/axure/axQuery.std.js"></script>
    <script src="resources/scripts/axure/doc.js"></script>

    <script src="https://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
    <script src="https://cdn.highcharts.com.cn/highcharts/modules/exporting.js"></script>
    <script src="https://cdn.highcharts.com.cn/highcharts/modules/oldie.js"></script>
    <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
    <script src="https://cdn.highcharts.com.cn/highcharts/themes/sand-signika.js"></script>


    <title>Document</title>
    <style>
        body {
            background-color: rgb(180, 206, 243);
            font-size: 20px;
        }

        .index {
            padding-top: 100px;
            padding-bottom: 100px;
            margin: auto;
            width: 920px;
            background-color: white;
            box-shadow: 10px 10px 15px black;
            margin-top: 50px;
        }

        form {
            padding-left: 100px;
            line-height: 180%;
        }

        p {
            line-height: 180%;
        }

        #btn {
            background-color: #425fc9;
            color: white;
            padding: 5px 10px;
            margin-left: 320px;
            margin-top: 16px;
            margin-bottom: 20px;
            font-size: 20px;
        }

        table {
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="index">
        <p style="font-size:30px;text-align: center;">教学类软件评价指标重要性调查问卷</p>
        <div style="width:75% ;margin: auto;text-indent:2em;">
            在疫情时代，线上教学占据的比重越来越大，相关的教学类软件也都不断发展，面对一定数量的教学类软件，大众对其评价指标的重要性程度也有着各自看法，该调查旨在分析人们对于各种教学类软件评价指标的重要性看法。</div>
        <div class="result" style="width:75% ;margin: auto;">
            <p style="font-size:30px;text-align: center;">调查结果</p>
            <ol>
                <li>专家认为的最好的教学类软件：</li>
                <!-- <table width="600" border="1" cellspacing="0">
                    <thead>
                        <tr>
                            <th>结果</th>
                        </tr>
                    </thead>
                    <tbody id="tb1"></tbody>
                </table><br> -->
            </ol>
        </div>
        <div id="container" style="min-width: 400px; max-width: 600px; height: 400px; margin: 0 auto"></div>
        <p style="width:75% ;margin: auto;text-indent:2em;">根据所给内容及个人经验填写以下问卷。<br></p>
        <form method="get" action="/main11" id="tform">
            <ol>
                <li>时效性的重要程度：</li>
                <label><input type="radio" name="sx" value="1" required />&nbsp;&nbsp;非常不重要&nbsp;&nbsp; </label>
                <label><input type="radio" name="sx" value="2" />&nbsp;&nbsp;较不重要&nbsp;&nbsp; </label>
                <label><input type="radio" name="sx" value="3" />&nbsp;&nbsp;无所谓&nbsp;&nbsp; </label>
                <label><input type="radio" name="sx" value="4" />&nbsp;&nbsp;较重要&nbsp;&nbsp; </label>
                <label><input type="radio" name="sx" value="5" />&nbsp;&nbsp;非常重要 </label>
                <br>理由（必填）：<input type="text" name="reason1" id="ly1" required style="width: 400px;">
                <li>功能交互性的重要程度：</li>
                <label><input type="radio" name="gn" value="1" required />&nbsp;&nbsp;非常不重要&nbsp;&nbsp; </label>
                <label><input type="radio" name="gn" value="2" />&nbsp;&nbsp;较不重要&nbsp;&nbsp; </label>
                <label><input type="radio" name="gn" value="3" />&nbsp;&nbsp;无所谓&nbsp;&nbsp; </label>
                <label><input type="radio" name="gn" value="4" />&nbsp;&nbsp;较重要&nbsp;&nbsp; </label>
                <label><input type="radio" name="gn" value="5" />&nbsp;&nbsp;非常重要 </label>
                <br>理由（必填）：<input type="text" name="reason2" id="ly2" required style="width: 400px;">
                <li>结构合理性的重要程度：</li>
                <label><input type="radio" name="jg" value="1" required />&nbsp;&nbsp;非常不重要&nbsp;&nbsp; </label>
                <label><input type="radio" name="jg" value="2" />&nbsp;&nbsp;较不重要&nbsp;&nbsp; </label>
                <label><input type="radio" name="jg" value="3" />&nbsp;&nbsp;无所谓&nbsp;&nbsp; </label>
                <label><input type="radio" name="jg" value="4" />&nbsp;&nbsp;较重要&nbsp;&nbsp; </label>
                <label><input type="radio" name="jg" value="5" />&nbsp;&nbsp;非常重要 </label>
                <br>理由（必填）：<input type="text" name="reason3" id="ly3" required style="width: 400px;">
                <li>视频质量的重要程度：</li>
                <label><input type="radio" name="sp" value="1" required />&nbsp;&nbsp;非常不重要&nbsp;&nbsp; </label>
                <label><input type="radio" name="sp" value="2" />&nbsp;&nbsp;较不重要&nbsp;&nbsp; </label>
                <label><input type="radio" name="sp" value="3" />&nbsp;&nbsp;无所谓&nbsp;&nbsp; </label>
                <label><input type="radio" name="sp" value="4" />&nbsp;&nbsp;较重要&nbsp;&nbsp; </label>
                <label><input type="radio" name="sp" value="5" />&nbsp;&nbsp;非常重要 </label>
                <br>理由（必填）：<input type="text" name="reason4" id="ly4" required style="width: 400px;">
                <li>学习反馈的重要程度：</li>
                <label><input type="radio" name="xx" value="1" required />&nbsp;&nbsp;非常不重要&nbsp;&nbsp; </label>
                <label><input type="radio" name="xx" value="2" />&nbsp;&nbsp;较不重要&nbsp;&nbsp; </label>
                <label><input type="radio" name="xx" value="3" />&nbsp;&nbsp;无所谓&nbsp;&nbsp; </label>
                <label><input type="radio" name="xx" value="4" />&nbsp;&nbsp;较重要&nbsp;&nbsp; </label>
                <label><input type="radio" name="xx" value="5" />&nbsp;&nbsp;非常重要 </label>
                <br>理由（必填）：<input type="text" name="reason5" id="ly5" required style="width: 400px;">
                <li>您对以上指标的判断依据及影响程度：</li>
                实践经验：<label><input type="radio" name="sj" value="1" required />&nbsp;&nbsp;小&nbsp;&nbsp; </label>
                <label><input type="radio" name="sj" value="2" />&nbsp;&nbsp;中&nbsp;&nbsp; </label>
                <label><input type="radio" name="sj" value="3" />&nbsp;&nbsp;大&nbsp;&nbsp; </label><br>
                理论分析：<label><input type="radio" name="ll" value="1" required />&nbsp;&nbsp;小&nbsp;&nbsp; </label>
                <label><input type="radio" name="ll" value="2" />&nbsp;&nbsp;中&nbsp;&nbsp; </label>
                <label><input type="radio" name="ll" value="3" />&nbsp;&nbsp;大&nbsp;&nbsp; </label><br>
                直观感受：<label><input type="radio" name="zg" value="1" required />&nbsp;&nbsp;小&nbsp;&nbsp; </label>
                <label><input type="radio" name="zg" value="2" />&nbsp;&nbsp;中&nbsp;&nbsp; </label>
                <label><input type="radio" name="zg" value="3" />&nbsp;&nbsp;大&nbsp;&nbsp; </label>
                <li>您对调查内容的熟悉程度：</li>
                <label><input type="radio" name="sxcd" value="1" required />&nbsp;&nbsp;不熟悉&nbsp;&nbsp; </label>
                <label><input type="radio" name="sxcd" value="2" />&nbsp;&nbsp;不太熟悉&nbsp;&nbsp; </label>
                <label><input type="radio" name="sxcd" value="3" />&nbsp;&nbsp;一般熟悉&nbsp;&nbsp; </label>
                <label><input type="radio" name="sxcd" value="4" />&nbsp;&nbsp;较熟悉&nbsp;&nbsp; </label>
                <label><input type="radio" name="sxcd" value="5" />&nbsp;&nbsp;特别熟悉 </label>
                <label style="visibility: hidden;"><input id="us" type="radio" name="username" value="username"
                        checked="checked" />&nbsp;&nbsp;特别熟悉 </label>
            </ol>
            <!--<button id="btn" type="submit">提交问卷</button>-->
            <input id="btn" type="submit" align="absmiddle" value="提交问卷" class="sebutt" name="button1" onclick="TJ()">
        </form>
    </div>
    <script>
        var loc = location.href;
        var n1 = loc.length;
        var n2 = loc.indexOf('=')
        if (n2 >= 0 && n2 <= n1) {
            var n3 = loc.substring(n2 + 1);
            var username = n3;
            username = username.toString();
            if(username=='user'){
                document.getElementById("btn").style.display='none'
            }
            var data = {
                username
            }
            console.log("data:", data)
            document.getElementById("us").value = username;

            // $.get('/du1', data, function (re) {
            //     var l1 = "",
            //         l2 = "",
            //         l3 = "",
            //         l4 = "",
            //         l5 = "",
            //         l6 = "",
            //         l7 = "",
            //         l8 = "",
            //         l9 = "",
            //         l10 = "";
            //     var rows = re
            //     var i = 0
            //     while (i < rows.length) {
            //         if (rows[i].user == 'zj1') {
            //             l1 = rows[i].app;
            //         }
            //         if (rows[i].user == 'zj2') {
            //             l2 = rows[i].app;
            //         }
            //         if (rows[i].user == 'zj3') {
            //             l3 = rows[i].app;
            //         }
            //         if (rows[i].user == 'zj4') {
            //             l4 = rows[i].app;
            //         }
            //         if (rows[i].user == 'zj5') {
            //             l5 = rows[i].app;
            //         }
            //         if (rows[i].user == 'zj6') {
            //             l6 = rows[i].app;
            //         }
            //         if (rows[i].user == 'zj7') {
            //             l7 = rows[i].app;
            //         }
            //         if (rows[i].user == 'zj8') {
            //             l8 = rows[i].app;
            //         }
            //         if (rows[i].user == 'zj9') {
            //             l9 = rows[i].app;
            //         }
            //         if (rows[i].user == 'zj10') {
            //             l10 = rows[i].app;
            //         }
            //         i = i + 1
            //     } //while循环
            //     var per = [{
            //             ly: l1
            //         },
            //         {
            //             ly: l2
            //         },
            //         {
            //             ly: l3
            //         },
            //         {
            //             ly: l4
            //         },
            //         {
            //             ly: l5
            //         },
            //         {
            //             ly: l6
            //         },
            //         {
            //             ly: l7
            //         },
            //         {
            //             ly: l8
            //         },
            //         {
            //             ly: l9
            //         },
            //         {
            //             ly: l10
            //         }
            //     ];
            //     var tb = document.getElementById('tb1');
            //     for (var i = 0; i < per.length; i++) {
            //         var trow = getDataRow(per[i], i);
            //         tb.appendChild(trow);
            //     }

            //     function getDataRow(h) {
            //         var row = document.createElement('tr');

            //         var kuanCell = document.createElement('td');
            //         kuanCell.innerHTML = h.ly;
            //         row.appendChild(kuanCell);

            //         return row;

            //     }
            // }) //第二个get
        } else {
            alert("非法进入！");
            window.location = "index.html"
        }
    </script>
    <script>
        var k = 1
        var data = {
            k
        }
        $.get('/du1', data, function (re) {
            for (var i = 0; i < re.length; i++) {
                if (re[i].app.indexOf("慕课") != -1 || re[i].app.toLowerCase().indexOf("mooc") != -1) {
                    re[i].app = "中国大学MOOC"
                }
                if (re[i].app.indexOf("腾讯课堂") != -1) {
                    re[i].app = "腾讯课堂"
                }
                if (re[i].app.indexOf("腾讯会议") != -1) {
                    re[i].app = "腾讯会议"
                }
                if (re[i].app.toLowerCase().indexOf("u校园") != -1) {
                    re[i].app = "U校园"
                }
            }
            var app0 = [];
            var num0 = [];
            for (var i = 0; i < re.length; i++) {
                var n = 0;
                for (var j = 0; j < app0.length; j++) {
                    if (re[i].app == app0[j]){
                        num0[j] = num0[j] + 1
                        n = 1;
                    }      
                }
                if (n == 0) {
                    app0.push(re[i].app)
                    num0.push(1)
                }

            }
            var chart = Highcharts.chart('container', {
                chart: {
                    type: 'bar'
                },
                title: {
                    text: '专家认为的最好的教学类软件结果条形图'
                },
                xAxis: {
                    categories: app0,
                    title: {
                        text: null
                    }
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: '选择专家数(人)',
                        align: 'high'
                    },
                    labels: {
                        overflow: 'justify'
                    }
                },
                tooltip: {
                    valueSuffix: ' 人'
                },
                plotOptions: {
                    bar: {
                        dataLabels: {
                            enabled: true,
                            allowOverlap: true // 允许数据标签重叠
                        }
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'top',
                    x: -40,
                    y: 100,
                    floating: true,
                    borderWidth: 1,
                    backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
                        '#FFFFFF'),
                    shadow: true
                },
                series: [{
                    name: '数量',
                    data: num0
                }]
            });
        })
    </script>
</body>

</html>